<template>
	<view>
		<view class="search-service ">
			<view class="search-content share">
				<view class="service-title">
					<text>{{inputValue}}</text> - <text>服务</text>
				</view>
			</view>
			<view class="search-li share" v-for="(item, index) in fuwuContents" :key="index">
				<view>
					<image class="icon" src="../static/icon.jpg" mode=""></image>
					<view class="high-light" v-html="highLight(item.title)"></view>
				</view>
				<view class="enter">一键进入<image class="arrow-right" src="../static/right.svg" mode=""></image>
				</view>
			</view>

			<!-- 点击加载更多 -->
			<view class="look-more" v-if="noneData" @click="updateMore">
				<view class="more-box">
					<text v-if="showBottom">查看更多</text>
					<text class="show-bottom" v-else>没有更多的了</text>
				</view>
			</view>
			<!-- /点击加载更多 -->
		</view>
	</view>
</template>

<script>
	import {
		request,
		postRequest
	} from "../utils/request.js"
	export default {
		name: "service",
		data() {
			return {
				fuwuContents: this.fuwuContent,
				servicePage: 1,
				showBottom: true,
				noneData: true,
				city: ''
			};
		},

		props: {
			inputValue: String,
			fuwuContent: Array,
			fenci: Array

		},
		
		watch: {
			fuwuContent(val) {
				this.fuwuContents = val;
			}
		},
		
		mounted() {
			this.city = uni.getStorageSync("city");
		},
		
		methods: {
			reLoad(e) {
				this.showBottom = true;
				this.servicePage = 1;
			},
			
			// 点击更多
			updateMore() {
				this.servicePage++;
				postRequest("service.php", {
					action: "tools",
					city: this.city.cityname,
					keywords: this.inputValue,
					type: "search",
					size: 10,
					page: this.servicePage,
					ordertype: ""
				}, "POST").then((res) => {
					if (res.data == "") {
						this.showBottom = false;
					} else {
						this.showBottom = true;
						this.fuwuContents = this.fuwuContents.concat(...res.data);
					}
				})

			},
			highLight(val) {
				this.fenci.forEach((item) => {
					val = val.replace(new RegExp(item, "gi"),
						`<span style="color: #FF6600">${item}</span>`);
				})
				return val;
			}
		}
	}
</script>

<style  lang="stylus">
	@import '../common.styl'
</style>
